<template>
	<view class="container">
		<cu-bar2 bgColor="bg-orange" :isBack="showBottom != 1"><block slot="content" class="page-name text-white">购物车</block></cu-bar2>
		<view class="contents-tabar" :class="[showBottom == 1 ? 'margin-bottom-200' : 'margin-bottom-100']">
			<view class="flex solid-bottom  justify-end bg-white">
				<view class=" padding-sm margin-xs radius" v-if="modalName == null" @click="showModal" data-target="editModal">编辑商品</view>
				<view class=" padding-sm margin-xs radius" v-else @click="hideModal">完成</view>
			</view>
			<view class="margin-top margin-bottom">
				<product-list-handle
					@onselect="onSelectShopType"
					:defaults="shopvalues"
					:datas="carlist"
					:allselect="allchecked"
					@onchange="onListChange"
					@onclick="onClickDetails"
				></product-list-handle>
			</view>
			<cu-more :title="loadMoreText"></cu-more>
		</view>
		<view class="padding-left-sm padding-right-sm bg-white foot" :class="[showBottom == 1 ? 'bottom-foot' : '']">
			<view class="flex justify-between padding-xs">
				<view class="flex radius ">
					<radio-group class=" block margin-top margin-line" @click="onRadioChange">
						<radio class="checkbox-btn round" :class="[{ checked: allchecked }]" :checked="allchecked" :value="!allchecked + ''"></radio>
						<view class="padding-bottom-xs padding-top-xs">全选</view>
					</radio-group>
					<view class="statistics-boxs margin-left boxs-center">
						<text class="statistics-title">合计：</text>
						<text class="statistics-price">￥1000</text>
					</view>
				</view>
				<view class="margin-left-xs boxs-center" v-if="modalName == null"><button class="base-btn bg-orange" @click="onAddOrder">立即支付</button></view>
				<view class="margin-left-xs boxs-center flex align-center" v-if="modalName == 'editModal'">
					<button class="cu-btn margin-left-sm round line-orange">移入收藏夹</button>
					<button class="cu-btn margin-left-sm round line-blue" @click="onDel">删除</button>
				</view>
			</view>
		</view>
		<tabbar v-if="showBottom == 1" isBottom="true" :selectIndex="2" @onswitch="onSwitch"></tabbar>
		<cu-shop-dialog :datas="shopinfo" :label="label" tag="ShopModal" :show="modalName" @oncommit="OnUpdataGoods"></cu-shop-dialog>
	</view>
</template>

<script>
import productListHandle from '../../components/single/list/product-list-handle.vue';
import cuShopDialog from '../../components/group/modal/cu-shop-dialog.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['hasLogin', 'userinfo']),
	components: {
		productListHandle,
		cuShopDialog
	},
	data() {
		return {
			allchecked: false,
			pageNo: 1,
			pageSize: 20,
			loadMoreText: '',
			total: 0,
			shop: [],
			modalName: null,
			label: '',
			showBottom: 1,
			shopinfo: {
				price: '￥99.0',
				selected: '黄色/xl',
				img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg',
				colors: [
					{
						name: '黄色',
						chencked: true,
						exist: true
					},
					{
						name: '红色',
						chencked: false,
						exist: true
					},
					{
						name: '绿色',
						chencked: false,
						exist: false
					},
					{
						name: '海蓝色',
						chencked: false,
						exist: true
					},
					{
						name: '天蓝色',
						chencked: false,
						exist: true
					},
					{
						name: '玫瑰色',
						chencked: false,
						exist: true
					}
				],
				sizes: [
					{
						name: 'xl',
						chencked: false,
						exist: true
					},
					{
						name: 'xxl',
						chencked: false,
						exist: true
					}
				],
				number: 1
			},
			shopvalues: [],
			carlist: [
				{
					title: '店铺名称',
					logo: '',
					value: 'A',
					checked: false,
					list: [
						{
							img:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577947798992&di=079263dabb4de085e166aba224abbf00&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F49176.jpg',
							name: 'Sanfu/三福外套女2019新款韩版面包服棉衣连帽外套厚外套女 军绿..',
							price: '99',
							bg: '黄色',
							styles: 'A款',
							number: 10,
							value: 'A1',
							checked: false
						},
						{
							img:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577947798992&di=079263dabb4de085e166aba224abbf00&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F49176.jpg',
							name: 'Sanfu/三福外套女2019新款韩版面包服棉衣连帽外套厚外套女 军绿..',
							price: '199',
							bg: '黑色',
							styles: 'A款',
							number: 10,
							value: 'A2',
							checked: false
						}
					]
				},
				{
					title: '店铺名称',
					logo: '',
					value: 'B',
					checked: false,
					list: [
						{
							img:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577947798992&di=079263dabb4de085e166aba224abbf00&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F49176.jpg',
							name: 'Sanfu/三福外套女2019新款韩版面包服棉衣连帽外套厚外套女 军绿..',
							price: '99',
							bg: '黄色',
							styles: 'A款',
							number: 10,
							value: 'B1',
							checked: false
						},
						{
							img:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577947798992&di=079263dabb4de085e166aba224abbf00&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F49176.jpg',
							name: 'Sanfu/三福外套女2019新款韩版面包服棉衣连帽外套厚外套女 军绿..',
							price: '199',
							bg: '黑色',
							styles: 'A款',
							number: 10,
							value: 'B2',
							checked: false
						}
					]
				},
				{
					title: '店铺名称',
					logo: '',
					value: 'B',
					checked: false,
					list: [
						{
							img:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577947798992&di=079263dabb4de085e166aba224abbf00&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F49176.jpg',
							name: 'Sanfu/三福外套女2019新款韩版面包服棉衣连帽外套厚外套女 军绿..',
							price: '99',
							bg: '黄色',
							styles: 'A款',
							number: 10,
							value: 'B1',
							checked: false
						},
						{
							img:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577947798992&di=079263dabb4de085e166aba224abbf00&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F49176.jpg',
							name: 'Sanfu/三福外套女2019新款韩版面包服棉衣连帽外套厚外套女 军绿..',
							price: '199',
							bg: '黑色',
							styles: 'A款',
							number: 10,
							value: 'B2',
							checked: false
						}
					]
				}
			]
		};
	},
	onLoad: function(prop) {
		if (prop.type) {
			this.showBottom = prop.type;
		}
	},
	onShow() {
		this.pageNo = 1;
		//this.onInit(0);
	}, //下拉刷新
	onPullDownRefresh: function() {
		var that = this;
		this.loadMoreText = '';
		this.pageNo = 1;
		setTimeout(function() {
			that.onInit(1);
		}, 500);
	}, //上拉加载更多
	onReachBottom() {
		this.pageNo++;
		if (this.pageNo > this.total) {
			this.loadMoreText = '没有更多数据了!';
			return;
		}
		setTimeout(() => {
			this.onInit();
		}, 500);
	}, //分享页面
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		let params = 'token=' + this.userinfo.uid;
		return this.util.getSharePage(params);
	},
	methods: {
		...mapMutations(['setinviter']),
		onInit: function(type) {
			let that = this;
			this.$controller.onHome(this.pageNo, this.$store.state, type, function(data, error, msg) {
				console.log(data);
				if (error == 0) {
					that.total = data.total;
					if (that.pageNo == 1) {
						that.shop = data.shop;
					} else {
						that.shop = that.shop.concat(data.shop);
					}
				}
			});
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null;
		},
		toPage: function(e) {
			let url = e.currentTarget.dataset.url;
			if (!url) {
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		onRadioChange: function(e) {
			this.allchecked = !this.allchecked;
		},
		onClickDetails: function(e) {
			this.util.showAlert("查看商品详情");
		},
		onAddOrder: function() {
			this.util.showAlert("立即下单");
		},
		onSelectShopType: function(e) {
			this.modalName = 'ShopModal';
			this.label = 'updata';
		},
		OnUpdataGoods: function(e) {
			this.hideModal();
		},
		onListChange(e) {
			console.log(e);
			this.carlist = e.lists;
			this.shopvalues = e.values;
		},
		onDel() {
			//let items=this.carlist;
			for (let index in this.carlist) {
				if (this.carlist[index].checked) {
					this.carlist.splice(index, 1);
				} else {
					for (let j = 0, lenJ = this.carlist[index].list.length; j < lenJ; ++j) {
						if (this.carlist[index].list[j].checked) {
							this.carlist[index].list.splice(j, 1);
						}
					}
				}
			}
			this.shopvalues = [];
		},
		onSwitch(e) {
			switch (parseInt(e)) {
				case 0:
					uni.redirectTo({
						url: '../home/home'
					});
					break;
				case 1:
					uni.redirectTo({
						url: '../shops/shop'
					});
					break;
				case 3:
					uni.redirectTo({
						url: '../users/users'
					});
					break;
			}
		}
	}
};
</script>

<style scoped>
.contents-tabar {
	background: rgba(241, 241, 242, 1);
}
.margin-bottom-100 {
	margin-bottom: 100upx;
}

.statistics-title {
	font-size: 28upx;
	font-family: PingFang;
	font-weight: bold;
	color: rgba(3, 2, 20, 1);
	line-height: 36upx;
}
.statistics-price {
	font-size: 42upx;
	font-family: PingFang;
	font-weight: bold;
	color: rgba(246, 71, 174, 1);
	line-height: 36upx;
}
.statistics-boxs {
	line-height: 80upx;
}

.boxs-center {
	padding-top: 20upx;
	padding-bottom: 20upx;
}
.bottom-foot {
	bottom: 100upx;
}
</style>
